<template>
	<view class="login">
		<view class="head">
			<image src="/static/logo.png" mode="" @click="bindLogin()"></image>
			<view class="name">
				<view @click="bindLogin">
					{{aname}}
				</view>
				<view @click="setPersonalInformation">
					{{account}}
				</view>
			</view>
			<uni-icons type="gear" size="30" style="margin-right: 20rpx;" @click="setUp"></uni-icons>
		</view>

		<view>
			<uni-section type="line" padding>
				<uni-grid :column="4" :highlight="true" :showBorder="false">
					<uni-grid-item >
						<view class="grid-item-box" style="background-color: #fff;"@click="myIndex()">
							<text>{{articleArr.length}}</text>
							<text class="text">发表</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box" style="background-color: #fff;">
							<text>0</text>
							<text class="text">评论</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box" style="background-color: #fff;">
							<text>0</text>
							<text class="text">关注</text>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="grid-item-box" style="background-color: #fff;">
							<text>0</text>
							<text class="text">获赞</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>

		<view>
			<uni-section type="line">
				<uni-group mode="card">
					<uni-section type="line" padding>
						<uni-grid :column="4" :highlight="true" :showBorder="false">
							<uni-grid-item>
								<view class="grid-item-box" style="background-color: #fff;" @click="mylike()">
									<uni-icons type="heart" :size="30" color="#777" />
									<text class="text">喜欢</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box" style="background-color: #fff;">
									<uni-icons type="chatbubble" :size="30" color="#777" />
									<text class="text">评论</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box" style="background-color: #fff;">
									<uni-icons type="star" :size="30" color="#777" />
									<text class="text">收藏</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box" style="background-color: #fff;">
									<uni-icons type="paperplane" :size="30" color="#777" />
									<text class="text">足迹</text>
								</view>
							</uni-grid-item>
						</uni-grid>
					</uni-section>
				</uni-group>
			</uni-section>

		</view>
		<view>
			<uni-group mode="card">
				<uni-section title="基础样式" type="line" padding>
					<uni-list :border="false">
						<uni-list-item title="列表左侧带略缩图" showArrow
							thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="base"
							rightText="默认" />
						<uni-list-item title="列表左侧带略缩图" showArrow
							thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="base"
							rightText="默认" />
					</uni-list>
				</uni-section>
			</uni-group>
		</view>

		<view>
			<uni-group mode="card">
				<uni-section title="基础样式" type="line" padding>
					<uni-list :border="false">
						<uni-list-item title="列表左侧带略缩图" showArrow
							thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="base"
							rightText="默认" />
					</uni-list>
				</uni-section>
			</uni-group>
		</view>

		<view>
			<uni-group mode="card">
				<uni-section title="基础样式" type="line" padding>
					<uni-list :border="false">
						<uni-list-item title="列表左侧带略缩图" showArrow
							thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="base"
							rightText="默认" />
						<uni-list-item title="列表左侧带略缩图" showArrow
							thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="base"
							rightText="默认" />
						<uni-list-item title="列表左侧带略缩图" showArrow
							thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="base"
							rightText="默认" />
						<uni-list-item title="列表左侧带略缩图" showArrow
							thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" thumb-size="base"
							rightText="默认" />
					</uni-list>
				</uni-section>
			</uni-group>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				aname: '未登录',
				account: '点击登录',
				articleArr: []
			}
		},
		computed: mapState(['hasLogin', 'uerInfo']),
		methods: {
			...mapMutations(['logout']),
			bindLogin() {
				if (this.hasLogin) {
					//此处需要功能
					this.setPersonalInformation()
					
				} else {
					uni.navigateTo({
						url: '/pages/onlogin/onlogin'
					})
				}
			},
			setPersonalInformation(){
				//编辑个人信息页面
				uni.navigateTo({
					url:'/pages/ModifyAccount/ModifyAccount'
				})
				
			},
			setUp(){
				uni.navigateTo({
					url:'/pages/setUp/setUp'
				})
			},
			myIndex(){
				uni.navigateTo({
					url:'/pages/myIndex/myIndex?userName='+this.uerInfo.userName
				})
			},
			//获取筛选后的发表内容
			myEssayNum(){
				uniCloud.callFunction({
					name:'getallData',
					data:{
						aname:this.uerInfo.userName
					}
				}).then((res)=>{
					//先获取老的数据在进行拼接
					this.articleArr=[]
					this.articleArr =res.result.data
				})
			},
			mylike(){
				uni.navigateTo({
					url:'/pages/myLike/myLike'
				})
			}
		},
		onShow() {
			this.myEssayNum()
			if (this.uerInfo.userName) {
				this.aname = this.uerInfo.userName
				this.account = '点击编辑'
			} else {
				this.aname = '未登录'
				this.account = '点击登录'
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.head {
		margin: 20rpx;
		height: 150rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 75rpx;
		}

		.name {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-grow: 1;
			padding: 10rpx;

			view:nth-child(2) {
				font-size: 15rpx;
				color: #7c7c7c;
			}
		}
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>